<!DOCTYPE html>
<html>
	<head>
		<title>three.js css3d - sprites</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			canvas {
				width: 100%;
				height: 900px;
				display: block;
			}

			.annotation {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				margin-left: 15px;
				margin-top: 15px;
				padding: 1em;
				width: 200px;
				color: #fff;
				background: rgba(0, 0, 0, 0.8);
				border-radius: .5em;
				font-size: 12px;
				line-height: 1.2;
				transition: opacity .5s;
				&::before {
					content: '1';
					position: absolute;
					top: -30px;
					left: -30px;
					width: 30px;
					height: 30px;
					border: 2px solid #fff;
					border-radius: 50%;
					font-size: 16px;
					line-height: 30px;
					text-align: center;
					background: rgba(0, 0, 0, 0.8);
				}
			}

			#number {
				position: absolute;
				z-index: -1;
			}
		</style>
	</head>
	<body>
		<script src="../build/three.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/loaders/MTLLoader.js"></script>
		<script src="js/loaders/OBJLoader.js"></script>

		<div class="annotation">
			<p><strong>Cube</strong></p>
			<p>In geometry, a cube is a three-dimensional solid object bounded by six square faces, facets or sides, with three meeting at each vertex.</p>
		</div>
		<canvas id="number" width="200" height="140"></canvas>

		<script>

			// Number

			// const canvas = document.getElementById("number");
			// const ctx = canvas.getContext("2d");
			// const x = 100;
			// const y = 70;
			// const radius = 30;
			// const startAngle = 0;
			// const endAngle = Math.PI * 2;
			//
			// ctx.strokeStyle = "rgb(0, 255, 255)";
			// ctx.lineWidth = 3;
			//
			// ctx.moveTo(0, 140);
			// ctx.lineTo(200, 0);
			// ctx.stroke();
			// three.js

			let camera;
			let controls;
			let scene;
			let renderer;
			let sprite;
			let mesh;
			let spriteBehindObject;
			const annotation = document.querySelector(".annotation");

			init();
			animate();

			function init() {
				// Camera

				camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 2, 2000);
				camera.position.x = 750;
				camera.position.y = 500;
				camera.position.z = 1250;

				// Scene

				scene = new THREE.Scene();

				// Lights

				const lights = [];
				lights[0] = new THREE.PointLight(0xffffff, 1, 0);
				lights[1] = new THREE.PointLight(0xffffff, 1, 0);
				lights[2] = new THREE.PointLight(0xffffff, 1, 0);

				lights[0].position.set(0, 2000, 0);
				lights[1].position.set(1000, 2000, 1000);
				lights[2].position.set(-1000, -2000, -1000);

				scene.add(lights[0]);
				scene.add(lights[1]);
				scene.add(lights[2]);

				let mtlLoader = new THREE.MTLLoader();

				mtlLoader.setPath('models/kai_guan_gui/');
				mtlLoader.load('kai_guan_gui.mtl', (materials)=>{
					console.log('ssmsks: ', materials)
					materials.preload();
					const objLoader = new THREE.OBJLoader();
					objLoader.setMaterials(materials);
					objLoader.setPath('models/kai_guan_gui/');
					objLoader.load('kai_guan_gui.obj', object => {
						object.scale.set(300, 300, 300)
						object.position.set(0, -150, 0)
						scene.add(object);
						mesh = object;

					}, ()=>{}, err => {});

				}, (opt)=> {

				}, (opt)=>{

				})

				// 绘制线
                var geometry = new THREE.Geometry();
                var material = new THREE.LineBasicMaterial({ color: '#53F3FF', linewidth: 3 });

                var p1 = new THREE.Vector3( 0, 150, 200 );

                var p2 = new THREE.Vector3( 270, 330, 250 );

                geometry.vertices.push(p1);

                geometry.vertices.push(p2);
                var line = new THREE.Line( geometry, material, THREE.LineSegments );
                scene.add(line);

				// Renderer

				renderer = new THREE.WebGLRenderer({ antialias: true });
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight);
				renderer.setClearColor(0x333333, 1);
				document.body.appendChild(renderer.domElement);

				// Controls

				controls = new THREE.OrbitControls(camera, renderer.domElement);
				controls.enableZoom = false;

				window.addEventListener("resize", onWindowResize, false);
			}

			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			function animate() {
				requestAnimationFrame(animate);
				controls.update();
				render();
			}

			function render() {
				renderer.render(scene, camera);
				updateAnnotationOpacity();
				updateScreenPosition();
			}

			function updateAnnotationOpacity() {
			    // if(mesh && sprite){
                //     const meshDistance = camera.position.distanceTo(mesh.position);
                //     const spriteDistance = camera.position.distanceTo(sprite.position);
                //     spriteBehindObject = spriteDistance > meshDistance;
                //     sprite.material.opacity = spriteBehindObject ? 0.25 : 1;
				// }


				// Do you want a number that changes size according to its position?
				// Comment out the following line and the `::before` pseudo-element.
				// sprite.material.opacity = 0;
			}

			function updateScreenPosition() {
				const vector = new THREE.Vector3(250, 350, 250);
				const canvas = renderer.domElement;

				vector.project(camera);

				vector.x = Math.round((0.5 + vector.x / 2) * (canvas.width / window.devicePixelRatio));
				vector.y = Math.round((0.5 - vector.y / 2) * (canvas.height / window.devicePixelRatio));

				annotation.style.top = `${vector.y}px`;
				annotation.style.left = `${vector.x}px`;
				annotation.style.opacity = spriteBehindObject ? 0.25 : 1;
			}


		</script>
	</body>
</html>
